<template>
  <div>
    <el-dialog v-dialogDrag :visible.sync="dialogVisible" title="单号详情" width="1000px" @close="resetForm()">
      <button-group ref="buttonGroup" @cancel="dialogVisible = false" />
      <el-row>
        <div class="detailsTop">
          <span>生产计划单</span>
          <el-divider content-position="right">{{ ruleForm.planNo }}</el-divider>
        </div>
        <div class="detailCont detailDialogFont threeDetailStyle">
          <ul>
            <li>
              <b>计划单号</b>
              <span>{{ ruleForm.planNo }}</span>
            </li>
            <li>
              <b>销售单号</b>
              <span>{{ ruleForm.saleNo }}</span>
            </li>
            <li>
              <b>生产批号</b>
              <span>{{ ruleForm.proNo }}</span>
            </li>
            <li>
              <b>计划开始时间</b>
              <span>{{ ruleForm.planBeginDate }}</span>
            </li>
            <li>
              <b>计划结束时间</b>
              <span>{{ ruleForm.planEndDate }}</span>
            </li>
            <li>
              <b>录入时间</b>
              <span>{{ ruleForm.enterAt }}</span>
            </li>
            <li>
              <b>录入人</b>
              <span>{{ ruleForm.enterName }}</span>
            </li>
            <li>
              <b>完工日期</b>
              <span>{{ ruleForm.finishDate }}</span>
            </li>
            <li>
              <b>计划类别</b>
              <span>{{ ruleForm.type }}</span>
            </li>
            <li class="oneHang">
              <b>备注</b>
              <span>{{ ruleForm.checkInstructions }}</span>
            </li>
          </ul>
        </div>
        <div>
          <h1 class="titleH1" v-if="[1,2].includes(ruleForm.status)">可下达数据</h1>
          <el-table border v-if="[1,2].includes(ruleForm.status)" class="tabOver" stripe height="150px" :data="ruleForm.materials">
            <el-table-column label="物料" align="center" :width="[1,2].includes(ruleForm.status) ? '150px' : ''">
              <template #default="{ row }">{{row.materialName}}{{row.materialCode !== '' ? '-【' + row.materialCode + '】' : ''}}</template>
            </el-table-column>
            <el-table-column prop="unit" label="单位" width="70px" align="center" />
            <el-table-column prop="deliveryDate" label="计划交期" width="90px" align="center" />
            <el-table-column prop="dispatchNum" label="已下达数量" width="90px" align="center" />
            <el-table-column prop="saleNum" label="订单数量" width="80px" align="center" />
            <el-table-column prop="planNum" label="计划数量" width="80px" align="center" />
            <el-table-column prop="issuedNum" v-if="[1,2].includes(ruleForm.status)" align="center" width="100px">
              <template slot="header">
                <span style="color: #f56c6c">*</span>本次下达数量
              </template>
              <template #default="{ row }">
                <span v-if="[3,4].includes(ruleForm.status)">{{row.issuedNum}}</span>
                <el-input-number v-else v-model="row.issuedNum" size="mini" :controls="false" :min="+row.planNum - +row.dispatchNum <= 0 ? null : 0" style="width: 100%" />
              </template>
            </el-table-column>
            <el-table-column v-if="[1,2].includes(ruleForm.status)" label="下达车间" prop="factoryId" align="center" width="100px">
              <template #default="{ row ,$index}">
                <tree-select ref="treeSelect" style="width: 100%" :props="treeProps" :options="departData" :disabled="false" :accordion="true" :value="row.factoryId" search-key="factoryName" @getNode="getValue($event, row, $index)" />
              </template>
            </el-table-column>
            <el-table-column prop="bomId" align="center" width="100px">
              <template slot="header">
                <span style="color: #f56c6c">*</span>bom版本
              </template>
              <template #default="{ row ,$index}">
                <el-select v-if="[1,2].includes(ruleForm.status)" v-model="row.bomId" style="width: 100%" filterable>
                  <el-option v-for="item in row.materialBomList" :key="item.id" :label="item.bomVersion" :value="item.id" />
                </el-select>
                <span v-else>{{row.bomVersion}}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="92px">
              <template #default="{ row }">
                <!-- <el-button type="text" @click="calculateBtn(row,1)">MRP计算</el-button> -->
                <span class="tabNoStyle" @click="calculateBtn(row,1)">MRP计算</span>
              </template>
            </el-table-column>
          </el-table>
          <div v-if="ruleForm.status !== 1">
            <h1 class="titleH1">已下达数据</h1>
            <el-table border class="tabOver" stripe height="150px" :data="issuedList">
              <el-table-column label="物料" align="center">
                <template #default="{ row }">{{row.materialName}}{{row.materialCode !== '' ? '-【' + row.materialCode + '】' : ''}}</template>
              </el-table-column>
              <el-table-column prop="unit" label="单位" align="center" />
              <el-table-column prop="issuedNum" label="已下达数量" align="center" />
              <el-table-column prop="factoryName" label="下达车间" align="center" />
              <el-table-column prop="bomVersion" label="bom版本" align="center" />
              <el-table-column label="操作" align="center" width="100px">
                <template #default="{ row }">
                  <!-- <el-button type="text" @click="calculateBtn(row,2)">MRP计算</el-button> -->
                  <span class="tabNoStyle" @click="calculateBtn(row,2)">MRP计算</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-row>
      <p style="text-align:right;">
        <el-button type="primary" v-if="[1,2].includes(ruleForm.status)" icon="el-icon-check" @click="submitForm()">下达</el-button>
      </p>
      <bottom-font ref="bottomFont" :obj-name="ruleForm.enterName ? ruleForm.enterName : this.$store.getters.compInfo.userName" :obj-date="ruleForm.enterAt" />
    </el-dialog>
    <!-- 详情 -->
    <calculate-detail ref="calculateDetail" />
  </div>
</template>
<script>
import TreeSelect from '@/components/TreeSelect'
import calculateDetail from './calculateDetail'
import bottomFont from '@/components/BottomFont'
export default {
  components: { TreeSelect, calculateDetail, bottomFont },
  props: {
    userAllList: {
      type: Array,
      default: () => {
        return []
      }
    },
    materialAll: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      title: '',
      ruleForm: {
        id: '',
        materials: []
      },
      rules: {
        materialId: [
          { required: true, message: '物料不能不能为空！', trigger: 'change' }
        ],
        planNo: [
          { required: true, message: '计划单号不能为空！', trigger: 'blur' }
        ],
        procedureId: [
          { required: true, message: '工序不能不能为空！', trigger: 'change' }
        ]
      },
      dialogVisible: false,
      getSaleList: [],
      departData: [],
      treeProps: {
        value: 'id',
        label: 'factoryName',
        children: 'children'
      },
      materialBomList: [],
      issuedList: []
    }
  },
  watch: {},
  mounted() {},
  methods: {
    async showDialog(row) {
      await this.getDetail(row.id)
      if (row.status !== 1) {
        await this.getHasRelease(row.id)
      }
      await this.getDepartData()
      this.dialogVisible = true
    },
    /**
     * @description: 获取所有车间
     * @return {*}
     */
    async getDepartData() {
      const res = await this.$axios.get('/pro/factory/list')
      this.departData = res.data.data
    },
    /* 获取物料下的bom版本 */
    async getBom(id, index) {
      const res = await this.$axios.get(`/pro/schedule/getBom?materialId=${id}`)
      if (res.data.code === 200) {
        this.ruleForm.materials[index].materialBomList = res.data.data
      }
    },
    /* 编辑获取详情 */
    async getDetail(id) {
      const res = await this.$axios.get(`/pro/plan/getReleaseDetail?id=${id}`)
      if (res.data.code === 200) {
        if (res.data.data.materials.length) {
          res.data.data.materials.forEach((item) => {
            item.issuedNum = +item.planNum - +item.dispatchNum
          })
        }
        this.ruleForm = { ...this.ruleForm, ...res.data.data }
      }
      if (this.ruleForm.materials.length > 0) {
        this.ruleForm.materials.forEach(async (item, index) => {
          await this.getBom(item.materialId, index)
        })
      }
    },
    async getHasRelease(id) {
      const res = await this.$axios.get(`/pro/plan/getHasRelease?id=${id}`)
      if (res.data.code === 200) {
        this.issuedList = res.data.data
      }
    },
    /** 获取选中的库房库位 */
    getValue(value, row, index) {
      if (value) {
        row.factoryId = value.id
      }
    },
    /** 下达 */
    async submitForm() {
      let arr = []
      this.ruleForm.materials.forEach((item) => {
        if (+item.issuedNum >= 1 && item.bomId) {
          arr.push(item)
        }
      })
      if (arr.length > 0) {
        const res = await this.$axios.post(
          `/pro/plan/release?planId=${this.ruleForm.id}`,
          arr
        )
        if (res?.data.code === 200) {
          this.$notify.success('提交成功！')
          this.dialogVisible = false
          this.$emit('getTableInfo')
        } else {
          this.$notify.error(res.data.msg)
        }
      } else {
        this.$alert(`请完善一条数据`, '提示', {
          confirmButtonText: '确认',
          type: 'warning'
        })
      }
    },
    async calculateBtn(row, num) {
      if (row.bomId) {
        let obj = {
          planId: row.id,
          bomId: row.bomId,
          issuedNum: row.issuedNum,
          planId: row.planId
        }
        this.$refs['calculateDetail'].showDialog(this.ruleForm, obj)
      } else {
        this.$notify.error('必须先选择BOM版本才能MRP计算')
      }
    },

    resetForm() {
      this.ruleForm = {
        id: '',
        materials: []
      }
      this.issuedList = []
    }
  }
}
</script>
<style lang='scss' scoped>
</style>
